<template>
  <div>
    <el-drawer
      v-model="showSecurityIssues"
      title="编辑资料"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="handleClose"
    >
      <div class="user-details ">
        <div class="header">
          <div class="avatar">
            <img src="http://foxhcs-alpha-localoss.foxtest.net/20230415/114721741.jpg" alt="">
          </div>
          <div class="name">RUIFOX</div>
          <i class="iconfont user-icon">&#xe64f;</i>
        </div>
        <el-divider/>
        <div class="base-details details-block">
            <div class="row">
              <div class="label">手机：</div>
              <div class="value">
                <span>18981818900</span>
              </div>
            </div>
            <div class="row">
              <div class="label">座机：</div>
              <div class="value">
                <span><i class="iconfont">&#xe687;</i>未设置</span>
              </div>
            </div>
            <div class="row">
              <div class="label">邮箱：</div>
              <div class="value">
                <span><i class="iconfont">&#xe687;</i>未设置</span>
              </div>
            </div>
            <div class="row">
              <div class="label">微信：</div>
              <div class="value">
                <span><i class="iconfont">&#xe687;</i>未设置</span>
              </div>
            </div>
          <div class="row">
            <div class="label">地址：</div>
            <div class="value">
              <span><i class="iconfont">&#xe687;</i>未设置</span>
            </div>
          </div>
        </div>
        <el-divider/>
        <div class="depart-details details-block">
            <div class="row">
              <div class="label">部门：</div>
              <div class="value">
                <span>技术部</span>
              </div>
            </div>
            <div class="row">
              <div class="label">直属上级：</div>
              <div class="value">
                <span><i class="iconfont">&#xe687;</i>未设置</span>
              </div>
            </div>
            <div class="row">
              <div class="label">部门负责人：</div>
              <div class="value">
                <span>否</span>
              </div>
            </div>
        </div>
      </div>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick(ruleFormRef)">确定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<script setup>
import { computed } from 'vue'


const props = defineProps({
  showDrawer: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['update:showDrawer'])
const showSecurityIssues = computed(()=>{return props.showDrawer})

const handleClose = () => {
  emits('update:showDrawer',false)
}
const cancelClick = () => {
  emits('update:showDrawer',false)
}
const confirmClick = () => {
  emits('update:showDrawer',false)
}
</script>
<style scoped lang='scss'>
.info-item{
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  min-height: 32px;
  .info-label{
    width: 80px;
    color: #333;
  }
}
.personal-setting-title{
  height: 60px;
  font-size: 18px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.user-details{
  width: auto;
  max-width: unset;
  min-width: 490px;
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
  margin-bottom: 16px;
  padding: 16px;
  .header{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 16px;
    .avatar{
      width: 36px;
      height: 36px;
      border-radius: 50%;
      overflow: hidden;
      img{
        width: auto;
        height: 100%;
      }
    }
    .name{
      min-width: 70px;
      font-weight: 500;
      font-size: 18px;
      color: rgb(51, 51, 51);
      line-height: 24px;
      margin: 0 16px;
    }
    .user-icon{
      font-size: 14px;
      color: $mainColor;
    }
  }
  .details-block{
    padding: 16px;
    .double-row{
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .row{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      line-height: 20px;
      margin-bottom: 8px;
    }
    .label{
      width: 120px;
      margin-right: 24px;
      color: #666;
      text-align: right;
    }
    .value{
      flex: 1;
      span{
        i{
          margin-right: 5px;
          color: #666;
          font-size: 14px;
        }
      }
    }
  }
}
</style>